<!-- 赛事订单 -->
<template>
  <div>
    <template v-if="detail.Charges">
      <div v-for="(item, index) in detail.Charges" :key="index" class="gl_mb_20">
        <el-divider content-position="left">
          <span class="divider_title">{{ item.Name }}</span>
          <!-- <span class="text gl_pl_20">{{ item.Name }} {{ formatMoney(item.UnitAmount) }} 元</span> -->
        </el-divider>
        <el-table class="table" :data="item.Items" size="mini">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="Name" label="姓名" />
          <el-table-column v-if="isIgnore('Gender', item.Code)" prop="Gender" label="性别" width="50" align="center" />
          <el-table-column v-if="isIgnore('IdCardNumber', item.Code)" prop="IdCardNumber" label="证件号码" />
          <el-table-column v-if="isIgnore('SimultaneousEntryAmount', item.Code)" prop="SimultaneousEntryAmount" label="兼项费">
            <template slot-scope="{row}">
              <p>{{ formatMoney(row.Amount) }}</p>
            </template>
          </el-table-column>
          <el-table-column v-if="isIgnore('Organization', item.Code)" prop="Organization" label="参赛机构" />
          <el-table-column v-if="isIgnore('EntryAmount', item.Code)" prop="EntryAmount" label="报名费">
            <template slot-scope="{row}">
              <p>{{ formatMoney(row.Amount) }}</p>
            </template>
          </el-table-column>
          <el-table-column v-if="isIgnore('IndividualEvents', item.Code)" prop="IndividualEvents" label="个人项目">
            <template slot-scope="{row}">
              <p v-for="(individualEvent, inindex) in row.IndividualEvents" :key="inindex" class="gl_ellipsis">
                <el-tooltip v-if="individualEvent" :content="individualEvent.EventLongName" placement="left" effect="light">
                  <div class="gl_ellipsis">
                    <span v-if="individualEvent">
                      <span>{{ individualEvent.EventLongName || '' }}</span>
                    </span>
                    <span v-if="inindex !== row.IndividualEvents.length - 1">,</span>
                  </div>
                </el-tooltip>
              </p>
            </template>
          </el-table-column>
          <el-table-column v-if="isIgnore('TeamEvents', item.Code)" prop="TeamEvents" label="团体项目">
            <template slot-scope="{row}">
              <p v-for="(teamEvent, tindex) in row.TeamEvents" :key="tindex" class="gl_ellipsis">
                <el-tooltip :content="teamEvent.EventLongName" placement="left" effect="light">
                  <div class="gl_ellipsis">
                    <span v-if="teamEvent">
                      <span>{{ teamEvent.EventLongName || '' }}</span>
                    </span>
                    <span v-if="tindex !== row.TeamEvents.length - 1">,</span>
                  </div>
                </el-tooltip>
              </p>
            </template>
          </el-table-column>
          <el-table-column v-if="isIgnore('TotalEventCount', item.Code)" prop="TotalEventCount" label="共报项目" align="center" />
          <el-table-column v-if="isIgnore('ExceedCount', item.Code)" prop="ExceedCount" label="产生兼项费" align="center" />
          <el-table-column v-if="isIgnore('HasInsurance', item.Code)" prop="HasInsurance" label="是否购买保险" align="center">
            <template slot-scope="{row}">
              <p v-if="row.HasInsurance">是</p>
              <p v-else>否</p>
            </template>
          </el-table-column>
          <el-table-column v-if="isIgnore('Event', item.Code)" prop="Event" label="所报项目">
            <template slot-scope="{ row }">
              <span>{{ row.Event.EventLongName || '' }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="isIgnore('TeamName', item.Code)" prop="TeamName" label="参报组数" />
          <el-table-column v-if="isIgnore('NeedFootCover', item.Code)" prop="NeedFootCover" label="是否需要赛事方提供脚套" align="center">
            <template slot-scope="{row}">
              <p v-if="row.NeedFootCover">是</p>
              <p v-else>否</p>
            </template>
          </el-table-column>
          <el-table-column v-if="isIgnore('FootSize', item.Code)" prop="FootSize" label="脚码数" align="center" />
          <el-table-column v-if="isIgnore('Amount', item.Code)" prop="Amount" label="费用(元)" align="center">
            <template slot-scope="{row}">
              <span>{{ formatMoney(row.Amount) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="text gl_py_5 gl_mt_10" type="flex" justify="end">
          <el-col :span="6" align="right">
            <span v-if="item.Code === 'Entry'">共报名人数为：{{ item.ItemsCount }} 人</span>
            <span v-if="item.Code === 'SimultaneousEntry'">产生兼项费为：{{ item.ItemsCount }} 次</span>
            <span v-if="item.Code === 'BigTeam'">产生大团体费用：{{ item.ItemsCount }} 次</span>
            <span v-if="item.Code === 'Foot'">电子脚套费：{{ item.ItemsCount }} 人</span>
            <span v-if="item.Code === 'Custom'">产生{{ item.Name }}：{{ item.ItemsCount }} 次</span>
            <span v-if="item.Code === 'Deposit'">保证金：{{ item.ItemsCount }} 人</span>
            <span v-if="item.Code === 'Insurance'">保险费：{{ item.ItemsCount }} 人</span>
          </el-col>
          <el-col :span="6" align="right" class="gl_pr_20">
            <span>合计：<span>{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
          </el-col>
        </el-row>
      </div>
    </template>
    <el-divider />
    <template v-if="detail.Summary && !detail.isFree">
      <el-row class="summary_wrap" type="flex" justify="end">
        <el-col :span="4">
          <ul class="summary_list">
            <li v-for="(item, index) in detail.Summary" :key="index" class="summary_item gl_clear">
              <span class="gl_fl">{{ item.ChargeTypeName }}</span>
              <span class="gl_fr">{{ formatMoney(item.Amount) }} 元</span>
            </li>
            <li class="summary_item summary_total gl_clear">
              <span class="gl_fl">已缴纳费用</span>
              <span class="gl_fr">{{ formatMoney(detail.PaidAmount) }} 元</span>
            </li>
            <el-divider />
            <li class="summary_item summary_total gl_clear">
              <span class="gl_fl">合计</span>
              <span class="gl_fr money_color">{{ formatMoney(detail.TotalAmount) }} 元</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
export default {
  name: 'CompetitionOrder',
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ignoreMap: {
        Gender: {
          Insurance: true,
          BigTeam: true,
          Foot: true
        },
        IdCardNumber: {
          BigTeam: true,
          Foot: true
        },
        SimultaneousEntryAmount: {
          Entry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          BigTeam: true,
          Foot: true
        },
        Organization: {
          Insurance: true,
          BigTeam: true,
          Foot: true
        },
        EntryAmount: {
          SimultaneousEntry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          BigTeam: true,
          Foot: true
        },
        IndividualEvents: {
          SimultaneousEntry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          BigTeam: true,
          Foot: true
        },
        TeamEvents: {
          SimultaneousEntry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          BigTeam: true,
          Foot: true
        },
        TotalEventCount: {
          Entry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          BigTeam: true,
          Foot: true
        },
        ExceedCount: {
          Entry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          BigTeam: true,
          Foot: true
        },
        HasInsurance: {
          Entry: true,
          SimultaneousEntry: true,
          Deposit: true,
          Custom: true,
          BigTeam: true,
          Foot: true
        },
        Event: {
          Entry: true,
          SimultaneousEntry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          Foot: true
        },
        TeamName: {
          Entry: true,
          SimultaneousEntry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          Foot: true
        },
        NeedFootCover: {
          Entry: true,
          SimultaneousEntry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          BigTeam: true
        },
        FootSize: {
          Entry: true,
          SimultaneousEntry: true,
          Insurance: true,
          Deposit: true,
          Custom: true,
          BigTeam: true
        },
        Amount: {
          Entry: true,
          SimultaneousEntry: true,
          Insurance: true,
          Custom: true,
          BigTeam: true
        }
      }
    };
  },
  methods: {
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    },
    // 是否被忽略
    isIgnore (tableProp, chargeCode) {
      const _map = this.ignoreMap;
      return !(chargeCode in _map[tableProp]);
    }
  }
};
</script>

<style scoped>
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 12px;
}
.money_color {
  color: #f56c6c;
}
.el-table,.el-table /deep/ .el-table__body-wrapper {
  min-height: auto;
}
.summary_item.summary_total {
  font-weight: bold;
}
.summary_item {
  font-size: 14px;
  color: #353434;
  line-height: 24px;
}
</style>
